<template>
	<div ref="echartsContainerRef"></div>
</template>

<script setup>
	import { ref } from 'vue';
	import useSetOption from '@/hooks/useSetOption';
	import { useVisualizationStore } from '@/stores/visualizationStore';

	// 注册地图
	import * as echarts from 'echarts';
	import china from '@/assets/MapData/china.json';
	echarts.registerMap('china', { geoJSON: china });

	const echartsContainerRef = ref(null);
	const visualizationStore = useVisualizationStore();

	useSetOption({
		// Echart容器
		refTarget: echartsContainerRef,
		// 是否监视
		openWatch: false,
		// Echarts渲染配置项
		renderOptions: () => {
			const mapData = visualizationStore.data.mapData;

			// 标题中的开始时间与结束时间
			const titleData = {
				start: mapData.voltageLevel[0],
				end: mapData.voltageLevel[mapData.voltageLevel.length - 1],
			};

			return {
				title: {
					text: `${titleData.start} ~ ${titleData.end} | 年度收入报告 | 年/万`,
					top: 4,
					left: 2,
					textStyle: { color: '#fff' },
				},
				timeline: {
					axixType: 'category',
					data: mapData.voltageLevel,
					autoPlay: true,
					playInterval: 10000,
				},
				grid: {
					left: '85%',
					right: '0',
				},
				geo: {
					type: 'map',
					map: 'china',
					left: 0,
					itemStyle: {
						areaColor: {
							type: 'radial',
							x: 0.5,
							y: 0.5,
							r: 0.5,
							colorStops: [
								{ offset: 0, color: 'rgba(147, 235, 248, .1)' },
								{ offset: 1, color: 'rgba(147, 235, 248, .8)' },
							],
						},
					},
					emphasis: {
						itemStyle: {
							areaColor: '#389BB7',
							borderWidth: 0,
						},
					},
				},
				// options是一个数组, 每个 timeline.dataItem 对应一个 optionsItem 对象
				options: mapData.voltageLevel.map((voltageLevelItem, index) => {
					return {
						xAxis: {
							show: false,
							type: 'value',
						},
						yAxis: {
							type: 'category',
							data: mapData.categoryData[voltageLevelItem].map((item) => item.name),
							axisLabel: { color: '#fff', interval: 0, fontSize: 8 },
						},
						series: [
							{
								type: 'bar',
								data: mapData.categoryData[voltageLevelItem].map((item) => item.value),
								itemStyle: { color: mapData.colors[index] },
								label: {
									show: true,
									offset: [0, 1],
									color: '#fff',
									fontSize: 8,
								},
							},
							{
								type: 'effectScatter',
								coordinateSystem: 'geo',
								data: mapData.topData[voltageLevelItem],
								label: {
									show: true,
									formatter: (params) => params.data.name,
									position: 'right',
									color: '#fff',
									fontSize: 8,
								},
								symbolSize: (val) => val[2] / 5,
								itemStyle: {
									color: mapData.colors[index],
								},
							},
						],
					};
				}),
			};
		},
	});
</script>

<style scoped></style>
